<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 bootstrap 样式表 -->
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.css"
      rel="stylesheet"
    />
    <style>
      body {
        padding-top: 50px;
      }
    </style>
  </head>

  <body>
    <!-- 栅格系统 -->
    <div class="container">
      <div class="d-flex justify-content-between align-items-center">
        <h1>图书管理</h1>
        <button
          class="btn btn-success btn-sm"
          data-bs-toggle="modal"
          data-bs-target="#addModal"
        >
          添加
        </button>
      </div>
      <table
        class="table table-bordered table-striped table-dark table-hover text-center"
      >
        <thead>
          <!-- 表头行 -->
          <tr>
            <th scope="col">Id</th>
            <th scope="col">书名</th>
            <th scope="col">作者</th>
            <th scope="col">出版社</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- 表格中的每一行 -->
          <tr>
            <th scope="row">xxx</th>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>
              <button type="button" class="btn btn-link btn-sm btn-delete">
                删除
              </button>
              <button type="button" class="btn btn-link btn-sm btn-update">
                编辑
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- add Modal -->
    <div class="modal fade" id="addModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">添加图书</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="addForm" class="p-3">
              <!-- 书名 -->
              <div class="mb-3">
                <label class="form-label">书名</label>
                <input
                  type="text"
                  name="bookname"
                  class="form-control"
                  placeholder="请输入图书名称"
                  name="bookname"
                />
              </div>
              <!-- 作者 -->
              <div class="mb-3">
                <label class="form-label">作者</label>
                <input
                  type="text"
                  name="author"
                  class="form-control"
                  placeholder="请输入作者名字"
                  name="author"
                />
              </div>
              <!-- 出版社 -->
              <div class="mb-3">
                <label class="form-label">出版社</label>
                <input
                  type="text"
                  name="publisher"
                  class="form-control"
                  placeholder="请输入出版社名称"
                  name="publisher"
                />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <button type="button" class="btn btn-primary" id="addBtn">
              确认
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- add Modal -->
    <div class="modal fade" id="editModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">编辑图书</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="editForm" class="p-3">
              <input type="hidden" name="id" />
              <!-- 书名 -->
              <div class="mb-3">
                <label class="form-label">书名</label>
                <input
                  type="text"
                  name="bookname"
                  class="form-control"
                  placeholder="请输入图书名称"
                  name="bookname"
                />
              </div>
              <!-- 作者 -->
              <div class="mb-3">
                <label class="form-label">作者</label>
                <input
                  type="text"
                  name="author"
                  class="form-control"
                  placeholder="请输入作者名字"
                  name="author"
                />
              </div>
              <!-- 出版社 -->
              <div class="mb-3">
                <label class="form-label">出版社</label>
                <input
                  type="text"
                  name="publisher"
                  class="form-control"
                  placeholder="请输入出版社名称"
                  name="publisher"
                />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <button type="button" class="btn btn-primary" id="editBtn">
              确认
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- bootstrap的js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/js/bootstrap.js"></script>
    <script>
      const baseUrl = "http://ajax-api.itheima.net/api";

      // 1. 获取所有的图书列表数据
      // 2. 循环渲染图书的表格结构
      function initBookList() {
        return fetch(baseUrl + "/books", {
          method: "GET",
        })
          .then((res) => res.json())
          .then((res) => {
            // 渲染图书的列表结构
            renderBookList(res.data);
          });
      }

      // 根据数组循环渲染图书的列表数据
      function renderBookList(list) {
        // 1. 声明一个空数组 rows
        const rows = [];
        // 2. 循环 list 数组，创建每个 tr 行，并 push rows 中
        list.forEach((item) => {
          rows.push(`<tr>
              <th scope="row">${item.id}</th>
              <td>${item.bookname}</td>
              <td>${item.author}</td>
              <td>${item.publisher}</td>
              <td>
                <button type="button" class="btn btn-link btn-sm btn-delete" data-id="${item.id}">删除</button>
                <button type="button" class="btn btn-link btn-sm btn-update" data-id="${item.id}">编辑</button>
              </td>
            </tr>`);
        });
        // 3. 把 rows 渲染到页面的 tbody 中
        document.querySelector("tbody").innerHTML = rows.join("");
      }

      // 调用初始化图书列表数据的方法
      initBookList();

      function getFormData(form) {
        // 快速获取到，要提交给服务器的数据
        const data = new FormData(form);
        return {
          bookname: data.get("bookname"),
          author: data.get("author"),
          publisher: data.get("publisher"),
          id: data.get("id") || undefined,
        };
      }

      // 1. 为 form 表单绑定 submit 提交事件
      // 2. 阻止表单的默认提交行为
      // 3. 把表单采集到的数据，通过 Ajax 提交给服务器
      const addForm = document.querySelector("#addForm");
      const addModal = new bootstrap.Modal(document.querySelector("#addModal"));
      document.querySelector("#addBtn").addEventListener("click", function (e) {
        // 发起请求，新增一本图书
        fetch(baseUrl + "/books", {
          method: "POST",
          body: JSON.stringify(getFormData(addForm)),
          headers: {
            "content-type": "application/json",
          },
        })
          .then((res) => res.json())
          .then((res) => {
            // 添加成功
            // 1. 重新渲染图书列表的数据
            initBookList();
            addForm.reset();
            addModal.hide();
          });
      });

      // 实现删除的功能
      // 1. 通过事件委托，给 tr 行中的删除按钮，绑定 click 事件
      // 2. 获取到点击的这一行的图书的 id
      // 3. 调用删除的接口，根据 id 删除指定的图书
      // 4. 删除成功之后，重新请求列表的数据
      document.querySelector("tbody").addEventListener("click", function (e) {
        if (e.target.classList.contains("btn-delete")) {
          // 获取自定义属性的值
          const id = e.target.dataset.id;
          // 调接口删除指定的图书
          fetch(baseUrl + "/books/" + id, { method: "DELETE" }).then((res) => {
            alert("删除成功");
            // 删除成功之后，刷新列表数据
            initBookList();
          });
        }
      });

      // 实现修改功能
      // 1. 打开对话框，回显对应的图书信息
      const eidtForm = document.querySelector("#editForm");
      const editModal = new bootstrap.Modal(
        document.querySelector("#editModal")
      );
      document.querySelector("tbody").addEventListener("click", function (e) {
        if (e.target.classList.contains("btn-update")) {
          fetch(baseUrl + "/books/" + e.target.dataset.id, {
            method: "GET",
          })
            .then((res) => res.json())
            .then((res) => {
              console.log(res);
              for (const key in res.data) {
                eidtForm.querySelector(`[name=${key}]`).value = res.data[key];
              }
            });
          editModal.show();
        }
      });
      // 2. 绑定点击事件，提交修改信息
      document.querySelector("#editBtn").addEventListener("click", () => {
        // 发起请求，修改图书
        const data = getFormData(editForm);
        fetch(baseUrl + "/books/" + data.id, {
          method: "PUT",
          body: JSON.stringify(data),
          headers: {
            "content-type": "application/json",
          },
        })
          .then((res) => res.json())
          .then((res) => {
            // 添加成功
            // 1. 重新渲染图书列表的数据
            initBookList();
            eidtForm.reset();
            editModal.hide();
          });
      });
    </script>
  </body>
</html>
